import React, {Component, Fragment} from 'react';
import {Card, Form, Input, Button, Icon, Checkbox, message} from 'antd';
import Axios from '../../axios';

import './index.less';

const FormItem = Form.Item;

class Login extends Component {

    state = {
        check: true
    };

    handleChangeStatus = () => {
        this.setState({
            check: !this.state.check
        });
    };

    handleClickSubmit = () => {
        this.props.form.validateFields((err, val) => {
            if (!err) {
                Axios.ajax({
                    url: '/user/login',
                    method: 'post',
                    baseURL: 'http://127.0.0.1:7001/api',
                    data: {
                        username: val.username,
                        password: val.password,
                        remember: val.remember
                    }
                }).then( res => {
                    const data = res.data;
                    let history = this.props.history;
                    if (data.code === 2000) {
                        history.push('/admin/home');
                        message.success(
                            `${data.data.res.name}, 欢迎你登录后台管理系统！`
                        )
                    } else if (data.code === 3000) {
                        message.error(
                            `${data.msg}`
                        )
                    } else {
                        message.error(
                            `${data.msg}`
                        )
                    }
                });
            }
        });
    };


    render() {
        const {getFieldDecorator} = this.props.form;

        return (
            <Fragment>
                <Card title={'用户登录'} className={'card-login'}>
                    <Form style={{width:300}}>
                        <FormItem hasFeedback={true}>
                            {
                                getFieldDecorator('username', {
                                    initialValue: '',
                                    rules: [
                                        {required: true, message: '用户名不能为空！'},
                                        {min: 2, max: 10, message: '用户名长度应在2～10之内'}
                                    ]
                                })(
                                    <Input prefix={<Icon type={'user'}/>} placeholder={'请输入用户名'} />
                                )
                            }
                        </FormItem>
                        <FormItem required={true}>
                            {
                                getFieldDecorator('password', {
                                    initialValue: '',
                                    rules: [
                                        {required: true, message: '密码不能为空！'}
                                    ]
                                })(
                                    <Input prefix={<Icon type={'lock'}/>} placeholder={'请输入密码'} type={'password'} />
                                )
                            }
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('remember', {
                                    initialValue: this.state.check,
                                    rules: []
                                })(
                                    <Checkbox onChange={this.handleChangeStatus} style={{float: 'left', marginLeft: '5px'}} checked={this.state.check}>记住密码</Checkbox>
                                )
                            }
                            <a href={'#/admin'} style={{float: 'right'}}>忘记密码?</a>
                        </FormItem>
                        <FormItem>
                            <Button type={'primary'}
                                    onClick={this.handleClickSubmit}
                                    style={{width: 300}}
                            >登  录</Button>
                        </FormItem>
                    </Form>
                </Card>
            </Fragment>
        );
    }
}

export default Form.create()(Login);